<template>
  <Card>
    <div class="flexCSB">
      <Input
        placeholder="请输入博物馆名称"
        style="width:400px"
        @on-change="change"
        suffix="ios-search"
        v-model="museumName"
        clearable
      ></Input>
    </div>
    <Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
    <Page
    show-total
      class="page"
      :total="total"
      :current.sync="current"
      show-elevator
      @on-change="changePage"
    />
  </Card>
</template>

<script>
export default {
  data() {
    return {
      loading1: false,
      columns: [
        { title: "博物馆名称", key: "name", align: "center" },
        { title: "博物馆ID", key: "museumId", align: "center" },
        {
          title: "合作协议",
          key: "pics2",
          align: "center",
          render: (h, params) => {
            return h(
              "div",
              {
                style: {
                  padding: "5px 0"
                }
              },
              params.row.fileUrl.map(v => {
                return h("img", {
                  style: {
                    width: "50%",
                    display: "block",
                    marginLeft: "25%",
                    marginTop: "5px",
                    cursor: "help"
                  },
                  on: {
                    click: () => {
                      this.download(v);
                    }
                  },
                  attrs: {
                    src: this.prefix + v
                  }
                });
              })
            );
          }
        }
      ],
      data: [],
      current: 1,
      size: 10,
      total: 0,
      museumName: ""
    };
  },
  created() {
    this.getMuseumProtocol();
  },
  methods: {
    getMuseumProtocol() {
      this.loading1 = true;
      this.$http(
        "/stage/protocol/getMuseumProtocol",
        {
          museumName: this.museumName,
          current: this.current,
          size: this.size
        },
        "post",
        res => {
          if (res.data.code == 200) {
            this.data = res.data.data.records;
            this.total = res.data.data.total;
            for (let i = 0; i < this.data.length; i++) {
              this.data[i].fileUrl = this.data[i].fileUrl.split(",");
            }
          } else {
            this.$Message.error(res.data.msg);
          }
          this.loading1 = false;
        }
      );
    },
    change() {
      this.current = 1;
      this.getMuseumProtocol();
    },
    changePage(data) {
      this.current = data;
      this.getMuseumProtocol();
    },
    download(file) {
      window.open(this.prefix + file);
    }
  }
};
</script>

<style scoped>
</style>